const birdDom = document.querySelector('.bird');
birdStyle = getComputedStyle(birdDom);
const widthBird = parseFloat(birdStyle.width);
const heightBird = parseFloat(birdStyle.height);

class Bird extends Rectangle{
    gravity = 1000;   
    constructor(){
        super(widthBird, heightBird, 150, 200, 0, 100, birdDom);
        this.swingState = 1;
        this.bindEvent();
    }
    
    // 綁定鼠標按下
    bindEvent(){
        document.addEventListener('keydown', (e) => {
            if(e.key === 'w' || e.key === 'ArrowUp'){
                this.vy += -550;
            }
        })
        this.startSwing();
    }

    // 小鳥扇翅膀
    startSwing(){
        if(this.timer){
            return ;
        }
        this.timer = setInterval( () => {
            birdDom.classList.remove('swing'+this.swingState);
            this.swingState = (++this.swingState % 3) + 1;
            birdDom.classList.add('swing'+this.swingState);
        },300)
    }
    stopSwing(){
        clearInterval(this.timer);
        this.timer = null;
    }

    onMove(){
        if(this.y >= 463) {
            this.y = 463;
            this.vy =0;
        }
        if(this.y <= 0 ){
            this.y = 0;
            this.vy = 0;
        }
    }

    move(duration){
        super.move(duration);
        this.vy += this.gravity * duration;
    }

}